<template>
  <Dialog :appDialog="appDialog">
    <el-scrollbar max-height="600px" style="padding-right: 20px">
      <el-form class="form_link" ref="formRef" :model="form" :rules="rules" label-width="100px">
        <!-- 标题 -->
        <el-form-item label="链接标题" prop="link_title">
          <el-input v-model="form.link_title" maxlength="12" show-word-limit placeholder="请输入链接标题"></el-input>
        </el-form-item>
        <!-- 链接地址 -->
        <el-form-item label="链接地址" prop="link_url">
          <el-input type="text" v-model="form.link_url" placeholder="请输入链接地址"></el-input>
        </el-form-item>
        <!-- 连接描述 -->
        <el-form-item label="链接描述" prop="link_desc">
          <el-input type="textarea" v-model="form.link_desc" :rows="2" maxlength="512" show-word-limit placeholder="请输入链接描述"></el-input>
        </el-form-item>
        <ZWUpload :cover="'link_share_image'" @submit="getFileList" ref="emptyData" />
      </el-form>
    </el-scrollbar>
  </Dialog>
</template>
<script setup lang="ts">
import Dialog from '@/components/Dialog.vue'
// import ZWUpload from

import {reactive, defineEmits, defineExpose, ref, watch} from 'vue';
import ZWUpload from "./ZWUpload.vue";
import {getSetionId} from '@/utils/utils'
import {quickLink} from '@/api/concreation'
import {ElForm} from "element-plus";
const formRef = ref<InstanceType<typeof ElForm>>();
const emptyData = ref(null);
const emit = defineEmits(['getLocalLink'])
// 分组ID
const groupId = ref(0)
const form = reactive({
  group_id:groupId.value,
  id:0,
  link_title:'',
  link_url:'',
  link_desc:'',
  link_share_image: '',
  code:'',
  check:false,
})
const rules = reactive({
  link_title: [
    {
      required: true,
      message: "链接标题不能为空",
      trigger: "blur",
    },
  ],
  link_url: [
    {
      required: true,
      message: "链接地址不能为空",
      trigger: "blur",
    },
  ],
  link_desc: [
    {
      required: true,
      message: "链接描述不能为空",
      trigger: "blur",
    },
  ],
  link_share_image: [
    {
      required: true,
      message: "链接封面不能为空",
      trigger: "change",
    },
  ],
});
const showDialog = () => {
  appDialog.visible = true;
}
const cancelHandel = () => {
  appDialog.visible = false;
  formRef.value.resetFields();
  form.link_title = ''
  form.link_url = ''
  form.link_desc = ''
  form.link_share_image =''
  form.code = ''
  emptyData.value.empty();
}
const submitHandel = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      try{
        emit('getLocalLink',{
          type:'link',
          is_local:true,
          data:[{
            title:form.link_title,
            link_title:form.link_title,
            content:form.link_desc,
            link_desc:form.link_desc,
            cover_image_url:form.link_share_image,
            code:form.code,
            link_url:form.link_url,
            link_desc:form.link_desc,
          }]
        })
        cancelHandel()
      }catch(e){
        console.log(e);
      }
    }
  });

}

const appDialog = reactive({
  visible: false,
  title: '创建链接',
  width: '670px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '保存'
})
// 获取上传成功的文件
const getFileList = (data: any) => {
  form.link_share_image = getSetionId('url',data)[0]  
  form.code = getSetionId('code',data)[0]  
};

watch(()=>form.link_share_image,()=>{
  formRef.value.validateField("link_share_image");
})
defineExpose({
  showDialog,
  groupId
})
</script>
<style lang="scss" scoped>
.form_link{
  margin:10px;
}
.radio_list {
  &_item {
    &_icon {
      width: 14px;
      height: 14px;
      margin: -3px 0 0 6px;
      img {
        margin-top: 2px;
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
  }
  :deep .el-radio__label {
    display: flex;
    align-items: center;
  }
}
.ml2 {
  margin-left: 2px;
}
.mr10 {
  margin-right: 10px;
}
.agree_ment {
  display: flex;
  align-items: center;
}
:deep .el-scrollbar {
  height: 50%;
}
</style>
